<template>
  <div>
    <div class="banner">
      <img :src="solve_banner" alt="杭州风鼎有限公司" />
      <div style="position:absolute;width:1300px;top:23%;left:50%;margin-left:-650px;">
        <svg-icon icon-class="bigdata" :style="style"></svg-icon>
      </div>
      <div style="position:absolute;width:1300px;bottom:17%;left:50%;margin-left:-650px;">
        <svg-icon icon-class="jjfa" :style="jjfaStyle"></svg-icon>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <h3 class="title">平台简介</h3>
        <p
          class="introduce animated fadeInRight"
        >大数据情报信息平台汇集相关部门的情报信息，采用大数据分析、人工智能建模等技术手段，实现对重点人、重点群体、重大突发案事件的预警、预测、预防。平台将云计算、大数据、移动互联等新兴信息技术与政法日常工作中的各个核心系统加以整合，打破各自为政、指挥协调难落实、信息不对称、日常办公繁琐等难题，建立起跨领域、跨机构协作的创新性政法系统运作模式。</p>
      </div>
    </div>
    <div class="magic-section circle-bg" style="padding:100px 0">
      <div class="magic-main" style="position:relative">
        <div class="small-circle" style="left:390px;top:-50px;"></div>
        <div class="small-circle" style="bottom:-50px;right:-290px;"></div>
        <div class="middle-circle" style="left:-90px;top:150px;"></div>
        <div class="middle-circle" style="top:-70px;right:-50px;"></div>
        <a-row type="flex" justify="space-around" :gutter="60" class="politics">
          <a-col :span="8">
            <div class="circle">以人为点</div>
          </a-col>
          <a-col :span="8">
            <div class="circle">以事为线</div>
          </a-col>
          <a-col :span="8">
            <div class="circle">以库为枢纽</div>
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="magic-section">
      <div class="magic-main">
        <h3 class="title">建设方案</h3>
        <div class="platform">
          <img :src="construction_plan" alt="建设方案" />
        </div>
      </div>
    </div>
    <div class="magic-section" style="position:relative">
      <img :src="honeycombBg" alt class="honeycomb-bg" />
      <div class="magic-main">
        <h3 class="title">系统关联模型</h3>
        <div class="platform">
          <img :src="system_model" alt="系统关联模型" />
        </div>
      </div>
    </div>
    <div class="magic-section" style="position:relative">
      <div class="magic-main">
        <h3 class="title">技术架构图</h3>
        <div class="platform">
          <img :src="technical" alt="技术架构图" />
        </div>
      </div>
    </div>
    <div class="magic-section" style="position:relative">
      <div class="magic-main">
        <h3 class="title">大数据架构图</h3>
        <div class="platform">
          <img :src="data_architecture" alt="技术架构图" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    jjfaStyle() {
      let width = 392 * (document.body.offsetWidth / 1920);
      let height = 64 * (document.body.offsetWidth / 1920);
      let right = -18 * (document.body.offsetWidth / 1920);
      return {
        width: width,
        height: height,
        position: "relative",
        float:"right",
        right: right
      };
    },
    style() {
      let width = 553 * (document.body.offsetWidth / 1920);
      let height = 64 * (document.body.offsetWidth / 1920);
      let left = -30 * (document.body.offsetWidth / 1920);
      return {
        width: width,
        height: height,
        position: "relative",
        left: left
      };
    }
  },
  data() {
    return {
      solve_banner: this.$global.IMG_URL + "/solve_banner.png",
      construction_plan: this.$global.IMG_URL + "/construction_plan.png",
      technical: this.$global.IMG_URL + "/technical.png",
      data_architecture: this.$global.IMG_URL + "/data_architecture.png",
      honeycombBg: this.$global.IMG_URL + "/honeycomb-bg.png",
      system_model: this.$global.IMG_URL + "/system_model.png"
    };
  }
};
</script>
<style lang="stylus" scoped>
.platform {
  margin-top: 120px;
}

.circle {
  margin: 0 auto;
}
</style>